<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>广告组管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表格 -->
    <Container>
      <!-- 标题 -->
      <ContainerTitle>广告组管理</ContainerTitle>
      <!-- <el-input
        placeholder="请输入广告主ID/广告主名称"
        v-model="accountIdAndName"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getList"
        ></el-button>
      </el-input> -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        class="m-table--handle"
      >
        <el-form-item label="投放产品">
          <el-select
            v-model="mainAccount"
            placeholder="请选择"
            @change="handleChangeMainAccount"
            filterable
            reserve-keyword
          >
            <el-option
              v-for="(item, index) in mainAccountOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告主Id">
          <el-cascader
            placeholder="请选择广告主ID"
            :key="isCascader"
            v-model="subAccount"
            :props="subOptionProps"
            :options="subAccountOptions"
            filterable
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="status" placeholder="请选择状态">
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="u-ml10"
            @click="search"
            >查询</el-button
          >
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
        <el-form-item label="批量操作" style="display: block">
          <el-select
            v-model="operation"
            placeholder="请选择"
            @change="handleChangOperation"
          >
            <el-option
              v-for="(item, index) in operationOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        border
        stripe
        tooltip-effect="dark"
        :data="accountList"
        style="width: 100%"
        :max-height="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          align="center"
          v-for="(item, index) in tableColumns"
          :label="item.label"
          :key="index"
          :fixed="index == 0 || index == 1"
          width="200"
          :prop="item.prop"
        >
          <template slot-scope="scope">
            <!-- 其他 -->
            <template v-if="item.prop === 'status'"
              >{{ scope.row.status | formatStatus }}
              <el-tooltip
                class="item"
                effect="dark"
                content="学习期失败"
                placement="top"
                v-if="scope.row.study_status == 3"
              >
                <i
                  class="ad-item-status-learning ad-item-status-learning-FAIL"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="学习期结束"
                placement="top"
                v-if="scope.row.study_status == 2"
              >
                <i
                  class="ad-item-status-learning ad-item-status-learning-SUCCESS"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="学习中"
                placement="top"
                v-if="scope.row.study_status == 1"
              >
                <i
                  class="ad-item-status-learning ad-item-status-learning-ing"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="成本保证已失效"
                placement="top"
                v-if="scope.row.compensate_status == 4"
              >
                <i
                  class="ad-item-protect-flag ad-item-protect-flag-protect-fail"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="成本保证生效中"
                placement="top"
                v-if="scope.row.compensate_status == 1"
              >
                <i
                  class="ad-item-protect-flag ad-item-protect-flag-protect"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="成本保证已赔付完成"
                placement="top"
                v-if="scope.row.compensate_status == 3"
              >
                <i
                  class="ad-item-protect-flag ad-item-protect-flag-protect-success"
                ></i>
              </el-tooltip>
            </template>

            <template v-else-if="item.prop === 'ocpx_action_type'">{{
              scope.row.ocpx_action_type | formatOcpxActionType
            }}</template>
            <template v-else>{{ scope.row[item.prop] }}</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="deep_conversion_type"
          label="深度转化目标"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <!-- 其他 -->
            <template>{{
              scope.row.deep_conversion_type | formatDeepConversionType
            }}</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="bid"
          label="出价"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deep_conversion_bid"
          label="深度出价"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="day_budget"
          label="今日预算"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="(items, indexs) in filterTableColumn"
          :label="items.label"
          :key="'table' + indexs"
          :prop="items.prop"
          width="200"
          align="center"
          sortable
        >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="page.pageSize"
        layout="total, prev, pager, next,slot"
        :total="pageTotal"
        @size-change="handlePagerSizeChange"
        @current-change="handlePagerCurrentChange"
      >
        每页条数
        <el-input
          v-model="pageSizes"
          size="mini"
          class="u-w200"
          @keyup.enter.native="setPageSize"
          onkeyup="value=value.replace(/[^\d]/g,'')"
        >
          <!-- <template slot="prepend">每页</template>
          <template slot="append">条</template> -->
          <template slot="append">
            <el-button type="primary" @click="setPageSize"
              >设置</el-button
            ></template
          >
        </el-input>
      </el-pagination>
    </Container>
    <el-dialog
      title="批量修改投放时段"
      :visible.sync="timeDialog"
      width="1200px"
      @close="cancelTimeDialog"
    >
      <el-row>
        <el-col :span="4">
          <el-table
            :data="multipleSelection"
            style="width: 100%"
            max-height="320px"
            ref="timeTable"
          >
            <el-table-column
              prop="unit_name"
              :label="'已选广告组' + multipleSelection.length"
              width="180"
            >
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="20">
          <el-radio-group v-model="launchPeriodType">
            <el-radio-button :label="0">全天</el-radio-button>
            <el-radio-button :label="1">指定时段</el-radio-button>
          </el-radio-group>
          <DropTime
            v-if="launchPeriodType == 1"
            :value.sync="launchPeriod"
            @change="scheduleWeekChange"
            class="u-mt10"
          ></DropTime>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelTimeDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="batchSetting(2)"
          :disabled="launchPeriodType == 1 && launchPeriod == null"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="批量修改出价"
      :visible.sync="offerDialogVisible"
      width="1200px"
      @close="cancelOfferDialog"
    >
      <div>
        出价金额：&nbsp;<el-input
          v-model="offer"
          placeholder="请输入出价金额"
          style="width: 90%"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <template slot="append">元</template>
        </el-input>
      </div>
      <el-table
        :data="multipleSelection"
        style="width: 100%"
        max-height="320px"
        ref="OfferTable"
      >
        <el-table-column
          prop="unit_name"
          :label="'广告组' + '(' + '共' + multipleSelection.length + '个）'"
        >
        </el-table-column>
        <el-table-column prop="ocpx_action_type" label="优化目标">
          <template slot-scope="scope">
            <template>{{
              scope.row.ocpx_action_type | formatOcpxActionType
            }}</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="bid"
          label="出价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deep_conversion_bid"
          label="深度出价"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelOfferDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="batchSettingDeep"
          :disabled="offer <= 0"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="批量修改深度出价"
      :visible.sync="deepOfferDialogVisible"
      width="1200px"
      @close="cancelDeepOfferDialog"
    >
      <div>
        深度出价金额：&nbsp;<el-input
          v-model="deepOffer"
          placeholder="请输入深度出价金额"
          style="width: 90%"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <template slot="append">元</template>
        </el-input>
      </div>
      <el-table
        :data="multipleSelection"
        style="width: 100%"
        max-height="320px"
        ref="deepOfferTable"
      >
        <el-table-column
          prop="unit_name"
          :label="'广告组' + '(' + '共' + multipleSelection.length + '个）'"
        >
        </el-table-column>
        <el-table-column prop="ocpx_action_type" label="优化目标">
          <template slot-scope="scope">
            <template>{{
              scope.row.ocpx_action_type | formatOcpxActionType
            }}</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="bid"
          label="出价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deep_conversion_bid"
          label="深度出价"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDeepOfferDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="batchSetting(3)"
          :disabled="deepOffer <= 0"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="批量修改第三方点击监测"
      :visible.sync="linksDialogVisible"
      width="1200px"
      @close="cancelLinksDialog"
    >
      <div>
        <div>第三方点击监测</div>
        <el-input
          v-model="links"
          type="textarea"
          :rows="2"
          class="u-mt15"
          placeholder="请输入第三方点击监测"
          style="width: 90%"
        >
        </el-input>
      </div>
      <div class="u-mt15">
        是否程序化2.0
        <el-radio v-model="programCreative" :label="0" class="u-ml10"
          >否</el-radio
        >
        <el-radio v-model="programCreative" :label="1">是</el-radio>
      </div>
      <el-table
        :data="multipleSelection"
        style="width: 100%"
        max-height="320px"
        ref="linksTable"
      >
        <el-table-column
          prop="unit_name"
          :label="'广告组' + '(' + '共' + multipleSelection.length + '个）'"
        >
        </el-table-column>
        <el-table-column prop="ocpx_action_type" label="优化目标">
          <template slot-scope="scope">
            <template>{{
              scope.row.ocpx_action_type | formatOcpxActionType
            }}</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="bid"
          label="出价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deep_conversion_bid"
          label="深度出价"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDeepOfferDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="batchSetting(4)"
          :disabled="links == null"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="批量修改过滤已转化用户"
      :visible.sync="excludeDialogVisible"
      width="1200px"
      @close="cancelExcludeDialog"
    >
      <div class="u-mt15">
        <span style="width:100px">过滤已转化用户：</span>
        <el-radio-group v-model="exclude">
          <el-radio-button :label="0">不限</el-radio-button>
          <el-radio-button :label="1">广告组</el-radio-button>
          <el-radio-button :label="2">广告计划</el-radio-button>
          <el-radio-button :label="3">本账户</el-radio-button>
          <el-radio-button :label="4">公司主体</el-radio-button>
          <el-radio-button :label="5">APP</el-radio-button>
        </el-radio-group>
        <div style="padding-left:110px" class="u-mt15">过滤已转化功能不支持优化目标为展示、点击的广告组，不支持人群覆盖预估</div>
      </div>
      <el-table
        :data="multipleSelection"
        style="width: 100%"
        max-height="320px"
        ref="excludeTable"
      >
        <el-table-column
          prop="unit_name"
          :label="'广告组' + '(' + '共' + multipleSelection.length + '个）'"
        >
        </el-table-column>
        <el-table-column prop="ocpx_action_type" label="优化目标">
          <template slot-scope="scope">
            <template>{{
              scope.row.ocpx_action_type | formatOcpxActionType
            }}</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="bid"
          label="出价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deep_conversion_bid"
          label="深度出价"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelExcludeDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="batchSetting(5)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";
import DropTime from "./components/drop-time";
const validateDeep = (rule, value, callback) => {
  if (value >= 70) {
    callback(new Error("出价最多不能超过70元"));
  }
};
export default {
  components: {
    Container,
    CustomTableColumn,
    ContainerTitle,
    DropTime,
  },
  data() {
    var num = (rule, value, callback) => {
      if (value < "0") {
        callback(new Error("输入内容不能小于0"));
      } else if (typeof value != Number) {
        callback(new Error("输入内容不能为汉字"));
      } else {
        callback();
      }
    };

    return {
      statusOptions: [
        {
          label: "不限（包含已删除）",
          value: -2,
        },
        {
          label: "已删除",
          value: 10,
        },
        {
          label: "全部（不包含已删除）",
          value: 0,
        },
      ],
      status: 0,
      isCascader: 0,
      offer: null, //出价
      deepOffer: null, //深度出价
      links: null, //第三方点击监测
      programCreative: 0, //程序化2.0 0：否 1是
      timeDialog: false,
      launchPeriod: null, //投放时段
      launchPeriodType: 0, //不限0
      subAccount: null,
      subAccountOptions: [],
      subOptionProps: {
        value: "accountId",
        label: "label",
        children: "children",
        multiple: false,
      },
      operation: 0, //无
      operationOptions: [
        {
          label: "无",
          value: 0,
        },
        {
          label: "出价",
          value: 1,
        },
        {
          label: "投放时段",
          value: 2,
        },
        {
          label: "深度出价",
          value: 3,
        },
        {
          label: "第三方点击监测",
          value: 4,
        },
        {
          label: "过滤已转化人群",
          value: 5,
        },
      ],
      queryParams: {},
      pageSizes: 10,
      mainAccount: "",
      mainAccountOptions: [],
      exclude: 0, //过滤已转化用户
      excludeOptions: [], //排除人群选择项
      accountIdAndName: "",
      dialogVisible: false,
      offerDialogVisible: false,
      deepOfferDialogVisible: false,
      linksDialogVisible: false,
      excludeDialogVisible: false,
      ids: null,
      tableColumns: [
        {
          label: "组名称",
          prop: "unit_name",
          visible: true,
        },
        {
          label: "计划名称",
          prop: "campaign_name",
          visible: true,
        },
        {
          label: "广告组ID",
          prop: "unit_id",
          visible: true,
        },
        {
          label: "状态",
          prop: "status",
          visible: true,
        },
        {
          label: "优化目标",
          prop: "ocpx_action_type",
          visible: true,
        },
      ],
      tableColumn: [
        {
          label: "花费",
          prop: "charge",
          visible: true,
        },
        {
          label: "封面曝光数",
          prop: "show",
          visible: true,
        },
        {
          label: "封面点击数",
          prop: "photo_click",
          visible: true,
        },
        {
          label: "素材曝光数",
          prop: "aclick",
          visible: true,
        },
        {
          label: "行为数",
          prop: "bclick",
          visible: true,
        },
        {
          label: "封面点击率",
          prop: "photo_click_ratio",
          visible: true,
        },
        {
          label: "行为率",
          prop: "action_ratio",
          visible: true,
        },
        {
          label: "平均千次封面曝光花费(元)",
          prop: "impression_1k_cost",
          visible: true,
        },
        {
          label: "平均封面点击单价(元)",
          prop: "photo_click_cost",
          visible: true,
        },
        {
          label: "平均行为单价（元）",
          prop: "action_cost",
          visible: true,
        },
      ],
      pageRules: {
        required: true,
        trigger: ["blur"],
        validator: validateDeep,
      },
      multipleSelection: [],
      ruleForm: {
        consume: "",
        conversion_cost: "",
        balance: "",
        limit_price: "",
      },
      rules: {
        limit_price: [
          {
            required: true,
            message: "请输入转化目标出价上限",
            trigger: "blur",
          },
        ],
        balance: [
          { required: true, message: "请输入账号余额", trigger: "blur" },
        ],
        consume: [
          { required: true, message: "请输入账号总消耗金额", trigger: "blur" },
        ],
        conversion_cost: [
          {
            required: true,
            message: "请输入账户累计转化成本上限金额",
            trigger: "blur",
          },
        ],
      },
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      pageTotal: 0,
      accountList: [],
      winHeight: 0,
      tableHeight: 0,
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter((item) => item.visible);
    },
  },
  created() {
    /*  this.getList(); */
    this.getMainProduct();
    this.setTableHeight();
  },
  filters: {
    formatMoney(val) {
      return parseFloat(val / 1000);
    },
    formatStatus: function (val) {
      if (val == -1) {
        return "不限";
      } else if (val == -2) {
        return "不限已删除";
      } else if (val == 11) {
        return "审核中";
      } else if (val == 12) {
        return "审核未通过";
      } else if (val == 14) {
        return "已结束";
      } else if (val == 15) {
        return "已暂停";
      } else if (val == 1) {
        return "计划已暂停";
      } else if (val == 17) {
        return "组超预算";
      } else if (val == 3) {
        return "计划超预算";
      } else if (val == 19) {
        return "未达投放时间";
      } else if (val == 20) {
        return "投放中";
      } else if (val == 10) {
        return "删除";
      }
    },
    formatOcpxActionType: function (val) {
      if (val == 0) {
        return "未知";
      } else if (val == 2) {
        return "点击转化链接";
      } else if (val == 10) {
        return "曝光";
      } else if (val == 11) {
        return "点击";
      } else if (val == 14) {
        return "已结束";
      } else if (val == 31) {
        return "下载完成";
      } else if (val == 53) {
        return "提交线索";
      } else if (val == 180) {
        return "激活";
      } else if (val == 190) {
        return "付费";
      } else if (val == 191) {
        return "首日ROI";
      } else if (val == 348) {
        return "有效线索";
      } else if (val == 383) {
        return "授信";
      } else if (val == 384) {
        return "完件";
      } else if (val == 715) {
        return "微信复制";
      }
    },
    formatDeepConversionType: function (val) {
      if (val == 3) {
        return "付费";
      } else if (val == 7) {
        return "次日留存";
      } else if (val == 10) {
        return "完件";
      } else if (val == 11) {
        return "授信";
      } else if (val == 0) {
        return "无";
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", () => {
        //监听浏览器窗口大小改变
        //浏览器变化执行动作
        this.setTableHeight();
      });
    });
  },
  methods: {
    search() {
      if (this.subAccount == null) {
        this.$message.error("请选择广告主id");
        return;
      }
      if (this.status == null) {
        this.$message.error("请选择状态");
        return;
      }
      this.getList();
    },
    cancelLinksDialog() {
      this.linksDialogVisible = false;
      this.operation = 0;
      this.links = null;
    },
    cancelExcludeDialog() {
      this.excludeDialogVisible = false;
      this.operation = 0;
      this.exclude = 0;
    },
    cancelDeepOfferDialog() {
      this.deepOfferDialogVisible = false;
      this.operation = 0;
      this.deepOffer = null;
    },
    cancelOfferDialog() {
      this.offerDialogVisible = false;
      this.offer = null;
      this.operation = 0;
    },
    cancelTimeDialog() {
      this.timeDialog = false;
      this.operation = 0;
      this.launchPeriod = null;
      this.launchPeriodType = 0;
    },
    scheduleWeekChange() {},
    handleChangOperation() {
      if (this.operation != 0) {
        if (this.multipleSelection.length == 0) {
          this.$message.error("请选择批量操作的广告组");
          this.operation = 0;
          return;
        }
        if (this.operation == 1) {
          //批量操作出价
          let status1 = 0,
            status2 = 0,
            status3 = 0,
            status4 = 0;
          this.multipleSelection.forEach((item) => {
            if (
              item.ocpx_action_type ==
              this.multipleSelection[0].ocpx_action_type
            ) {
              status1++;
            }
            if (
              item.deep_conversion_type ==
              this.multipleSelection[0].deep_conversion_type
            ) {
              status2++;
            }
            if (item.bid_type == this.multipleSelection[0].bid_type) {
              status3++;
            }
            if (item.smart_bid == this.multipleSelection[0].smart_bid) {
              status4++;
            }
          });
          let listLen = this.multipleSelection.length;
          if (
            status1 == listLen &&
            status2 == listLen &&
            status3 == listLen &&
            status4 == listLen
          ) {
            this.offerDialogVisible = true;
          } else {
            this.$message.error(
              "所选广告组的优化目标/深度优化目标/计费方式/出价方式，存在不一致，不支持统一修改出价"
            );
            this.operation = 0;
          }
        }
        if (this.operation == 2) {
          this.timeDialog = true;
        }
        if (this.operation == 3) {
          let isSet = 0;
          this.multipleSelection.forEach((item) => {
            if (item.deep_conversion_type == 0) {
              isSet = 1;
            }
          });
          if (isSet == 1) {
            this.$message.error(
              "所选广告组的优化目标/深度优化目标/计费方式/出价方式，存在不一致，不支持统一修改出价"
            );
            this.operation = 0;
            return;
          }
          this.deepOfferDialogVisible = true;
        }
        if (this.operation == 4) {
          this.linksDialogVisible = true;
        }
        if (this.operation == 5) {
          this.excludeDialogVisible = true;
        }
      }
    },
    setTableHeight() {
      if (window.innerHeight) this.winHeight = window.innerHeight;
      else if (document.body && document.body.clientHeight)
        this.winHeight = document.body.clientHeight;
      this.tableHeight = this.winHeight - 300;
    },
    //批量修改操作
    batchSetting(type) {
      let params;
      let data = [];
      this.getIds();
      if (type == 2) {
        //设置时段
        if (this.launchPeriodType == 0) {
          for (let i = 0; i < 7 * 24; i++) {
            data.push(1);
          }
        }
        params = {
          advertiser_id: this.subAccount[1],
          schedule_time:
            this.launchPeriodType == 0
              ? data.toString().replace(/,/g, "")
              : this.launchPeriod.replace(/,/g, ""),
          unit_ids: this.ids,
        };
      }
      if (type == 4) {
        //第三方监测
        params = {
          advertiser_id: this.subAccount[1],
          click_track_url: this.links,
          unit_ids: this.ids,
          programCreative: this.programCreative,
        };
      }
      if (type == 3) {
        if (this.deepOffer >= 70) {
          this.$message.error("深度出价最多不能超过70元请调整金额");
          return;
        }
        params = {
          advertiser_id: this.subAccount[1],
          deep_conversion_bid: parseFloat(this.deepOffer),
          unit_ids: this.ids,
        };
      }
      if(type == 5){
         params = {
          advertiser_id: this.subAccount[1],
          unit_ids: this.ids,
          filter_converted_level:Number(this.exclude),
        };
      }
      this.$http({
        method: "post",
        url: "/marketing/api/task/update_unit",
        data: params,
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
        this.getList();
        this.cancelOfferDialog();
        this.cancelTimeDialog();
        this.cancelDeepOfferDialog();
        this.cancelLinksDialog();
        this.cancelExcludeDialog();
      });
    },
    batchSettingDeep() {
      this.getIds();
      let params;
      if (this.offer >= 70) {
        this.$message.error("出价最多不能超过70元请调整金额");
        return;
      }
      if (this.multipleSelection[0].bid_type == 10) {
        params = {
          advertiser_id: this.subAccount[1],
          cpa_bid: parseFloat(this.offer),
          unit_ids: this.ids,
        };
      } else {
        params = {
          advertiser_id: this.subAccount[1],
          bid: parseFloat(this.offer),
          unit_ids: this.ids,
        };
      }
      this.$http({
        method: "post",
        url: "/marketing/api/task/update_unit",
        data: params,
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
        this.getList();
        this.cancelOfferDialog();
      });
    },
    // 获取投放产品
    getMainProduct() {
      this.$http({
        method: "get",
        url: "/marketing/api/task/getAllProduct",
      }).then((res) => {
        if (res.data.code === 1) {
          this.mainAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 根据主账号获取子账号
    handleChangeMainAccount() {
      this.subAccount = null;
      this.$http({
        method: "get",
        url: "/marketing/api/task/getByProduct",
        params: {
          product: this.mainAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          let ary = [];
          let data = res.data.data;
          data.forEach((item) => {
            let obj = {
              accountName: item.masterAccountName,
              accountId: item.masterAccountId,
              children: item.accounts,
              label: item.masterAccountName,
            };
            item.accounts.forEach((items) => {
              this.$set(
                items,
                "label",
                items.accountName + "(" + items.accountId + ")"
              );
            });
            ary.push(obj);
          });
          ++this.isCascader;
          this.subAccountOptions = ary;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    setPageSize() {
      this.page.pageSize = Number(this.pageSizes);
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getIds() {
      var arr = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].unit_id);
      }
      var obj = arr.toString();
      this.ids = obj;
    },
    getList() {
      if (this.page.pageSize >= 500) {
        this.$message.error("请求最大条数不能超过500 请重新设置");
        return;
      }
      this.$http({
        method: "get",
        url: "/marketing/api/task/getAdUnitList",
        params: {
          accountId: this.subAccount[1],
          status: this.status,
          page: this.page.pageNo,
          pageSize: this.page.pageSize,
        },
      }).then((res) => {
        if (res.data) {
          if (res.data.code == "1") {
            this.accountList = res.data.data.list;
            this.accountList.forEach((item) => {
              item.bid = parseFloat(item.bid / 1000);
              item.deep_conversion_bid = parseFloat(
                item.deep_conversion_bid / 1000
              );
            });
            this.pageTotal = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        }
      });
    },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getList();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getList();
    },
    getAccount() {
      this.ruleForm.limit_price = "";
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/marketing/api/task_app/set_warning",
            params: {
              accountIds: this.ids,
              consume: this.ruleForm.consume,
              conversion_cost: 0,
              balance: this.ruleForm.balance,
              limit_price: "",
            },
          }).then((res) => {
            if (res.data.code == "1") {
              this.$message.success(res.data.data);
              this.getList();
              this.dialogVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    dialogs() {
      if (this.multipleSelection == "") {
        this.$message.error("请选择账号");
      } else {
        this.dialogVisible = true;
        this.getIds();
      }
    },
    setOffer() {
      this.ruleForm.consume = "";
      this.ruleForm.conversion_cost = "";
      this.ruleForm.balance = "";
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/marketing/api/task_app/set_warning",
            params: {
              accountIds: this.ids,
              consume: "",
              conversion_cost: 0,
              balance: "",
              limit_price: this.ruleForm.limit_price,
            },
          }).then((res) => {
            if (res.data.code == "1") {
              this.$message.success(res.data.data);
              this.getList();
              this.offerDialogVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    setOfferDialog() {
      if (this.multipleSelection == "") {
        this.$message.error("请选择账号");
      } else {
        this.offerDialogVisible = true;
        this.getIds();
      }
    },
  },
};
</script>
<style>
html {
  overflow-x: scroll;
}
.ad-item-status-learning-FAIL {
  background-image: url();
  background-size: 100% 100%;
}
.ad-item-status-learning-SUCCESS {
  background-image: url();
  background-size: 100% 100%;
}
.ad-item-protect-flag-protect-fail {
  background-image: url();
}
.ad-item-status-learning-ing {
  background-image: url();
  background-size: 100% 100%;
}
.ad-item-protect-flag-protect {
  background-image: url();
}
.ad-item-protect-flag-protect-success {
  background-image: url();
}
.ad-item-status-learning {
  width: 34px;
  height: 18px;
  display: inline-block;
  margin-bottom: 1px;
  margin-left: 4px;
  vertical-align: middle;
}
.ad-item-protect-flag {
  width: 34px;
  height: 18px;
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 1px;
  background-size: 100%;
  vertical-align: middle;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
* {
  padding: 0;
  margin: 0;
}
.input-with-select {
  width: 25%;
}
.el-table {
  margin-top: 1%;
}
.btns {
  margin-top: 1%;
}
.dialog-content-title {
  margin-left: 50px;
  padding: 10px 5px;
  height: 129px;
  background: inherit;
  background-color: rgba(249, 249, 249, 1);
  line-height: 25px;
}
.toutiao-demo-ruleForm {
  margin-left: 50px;
}
.toutiao-demo-ruleForm .el-form-item__label {
  width: 200px !important;
}
.toutiao-demo-ruleForm .el-form-item__content {
  margin-left: 300px !important;
}
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  vertical-align: baseline;
}
</style>